<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-input
              placeholder="请输入内容"
              v-model="queryinfo.userTel"
              class="input-with-select"
              clearable
              @clear="getmsgList"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="getmsgList"
              ></el-button>
            </el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="dialogVisibleAdd = true"
              >添加</el-button
            >
          </div>
        </el-col>
      </el-row>
      <template>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" label="#"> </el-table-column>
          <!-- <el-table-column prop="id" label="#"> </el-table-column> -->
          <el-table-column prop="nickName" label="姓名"> </el-table-column>
          <el-table-column prop="userEmail" label="邮箱"> </el-table-column>
          <el-table-column prop="nickName" label="电话"> </el-table-column>
          <el-table-column prop="levelName" label="角色"> </el-table-column>
          <el-table-column prop="" label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isTb"
                @change="StateChange(scope.row.isTb, scope.row.id)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
              <el-tooltip
                effect="dark"
                content="编辑"
                placement="top-start"
                :enterable="false"
              >
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="editForm(scope.row.id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                effect="dark"
                content="删除"
                placement="top-start"
                :enterable="false"
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="deleteOpenUser(scope.row.id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                effect="dark"
                content="分享权限"
                placement="top-start"
                :enterable="false"
              >
                <el-button
                  type="success"
                  icon="el-icon-s-tools"
                  size="mini"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisibleAdd"
      width="45%"
      @close="addcloseDialog"
    >
      <el-form
        :model="addForm"
        :rules="addrules"
        ref="addForm"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input
            v-model="addForm.name"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="addForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input v-model="addForm.tel" placeholder="请输入手机号"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog title="修改用户" :visible.sync="dialogVisiblechange" width="45%" @close="changecloseDialog">
      <el-form
        :model="changeForm"
        :rules="changerules"
        ref="changeForm"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" >
          <el-input v-model="changeForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="changeForm.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input
            v-model="changeForm.tel"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblechange = false">取 消</el-button>
        <el-button type="primary" @click="changeUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    //   邮箱验证规则
    var cheakEmail = (rule, value, callback) => {
      const regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      if (regEmail.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法邮箱"));
    };
    //   手机号验证规则
    var cheakTel = (rule, value, callback) => {
      const regTel = /^1(3|4|5|6|7|8|9)\d{9}$/;
      if (regTel.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法手机号"));
    };
    return {
      addForm: {
        name: "",
        tel: "",
        email: "",
        password: "",
      },
      changeForm: {
        name: "",
        tel: "",
        email: "",
      },
      dialogVisibleAdd: false,
      dialogVisiblechange: false,
      total: 0,
      tableData: [],
      queryinfo: {
        userTel: "",
        pageIndex: 1,
        pageSize: 10,
        userEmail: "",
      },
      addrules: {
        name: [
          { required: true, message: "请输入用户账号", trigger: "blur" },
          { min: 3, max: 11, message: "长度在3到11个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入账户密码", trigger: "blur" },
          { min: 3, max: 15, message: "长度在3到15个字符", trigger: "blur" },
        ],
        tel: [
          { required: true, message: "请输入用户账号", trigger: "blur" },
          { min: 3, max: 11, message: "长度在3到11个字符", trigger: "blur" },
          { validator: cheakTel, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入账户密码", trigger: "blur" },
          { min: 3, max: 15, message: "长度在3到15个字符", trigger: "blur" },
          { validator: cheakEmail, trigger: "blur" },
        ],
      },
      changerules: {
        tel: [
          { required: true, message: "请输入用户账号", trigger: "blur" },
          { min: 3, max: 11, message: "长度在3到11个字符", trigger: "blur" },
          { validator: cheakTel, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入账户密码", trigger: "blur" },
          { min: 3, max: 15, message: "长度在3到15个字符", trigger: "blur" },
          { validator: cheakEmail, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getmsgList();
  },
  methods: {
    // 获取数据列表
    async getmsgList() {
      const { data: res } = await this.$http.post(
        "currencyAudit/getGxEquity",
        this.httputil(this.queryinfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.tableData = res.data.UserInfos;
      this.total = res.data.count;
    },
    // 监听每页有多少条 pageSize
    handleSizeChange(pageSize) {
      this.queryinfo.pageSize = pageSize;
      this.getmsgList();
    },
    // 监听当前是多少页 pageIndex
    handleCurrentChange(pageIndex) {
      this.queryinfo.pageIndex = pageIndex;
      this.getmsgList();
    },
    // 修改用户状态
    async StateChange(StateInfo, id) {
      const { data: res } = await this.$http.post(
        "currencyAudit/updateUserStatus",
        this.httputil({ id: id, isTb: StateInfo })
      );
      if (res.code !== 200) {
        StateInfo = !StateInfo;
        this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
      // this.getmsgList()
    },
    // 监听添加对话框关闭重置表单
    closeDialog() {
      this.$refs.addForm.resetFields();
    },
     // 监听修改对话框关闭重置表单
    addcloseDialog() {
      this.$refs.addForm.resetFields();
    },
    // 监听修改对话框关闭重置表单
    changecloseDialog() {
      this.$refs.changeForm.resetFields();
    },
    // 添加用户表单验证
    addUser() {
      this.$refs.addForm.validate(async (valid) => {
        if (!valid) return;
        // const { data: res } = await this.$http.post('currencyAudit/loginValue',this.httputil(this.loginForm))
        // if (res.code !== 200) return this.$message.error(res.msg)
        // this.$message.success(res.msg)
        // this.dialogVisibleAdd = false
        // this.getmsgList()
      });
    },
    // 查询需要修改用户信息
    async editForm(id){
        // const {data:res} = await this.post("url",this.httputil(data))
        // if(res.code !==200 ) return this.$message.error("res.msg")
        // this.$message.success(res.msg)
        // this.changeForm = res.dats
        this.dialogVisiblechange=true
    },
    // 修改用户表单验证
    changeUser() {
      this.$refs.changeForm.validate(async (valid) => {
        if (!valid) return;
        // const { data: res } = await this.$http.post('currencyAudit/loginValue',this.httputil(this.loginForm))
        // if (res.code !== 200) return this.$message.error(res.msg)
        // this.$message.success(res.msg)
        // this.dialogVisiblechange = false
        // this.getmsgList()
      });
    },
    // 根据ID删除用户信息
    async deleteOpenUser(id) {
        // 确认返回的是confirm
        // 取消返回的是cancel
      const deleteOpenUser = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((err) => {
          return err          
        });
        if(deleteOpenUser !== 'confirm'){
            this.$message.error("已取消！")
        }
        const {dats:res} =  await this.$http.post("url",this.httputil(data))
        if(res.code !==200)return this.$message.error("删除失败")
        this.$message.success("删除成功")
        this.getmsgList()
      }
  },
};
</script>
<style lang="less" scoped></style>
